.modal {
  padding: $padding-llg;
  padding-bottom: $padding-xl;
  border-radius: $br-lg;
  backdrop-filter: $blur;
  box-shadow: $shadow-1;
  width: 454px;
  box-sizing: border-box;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: $modal-bg;
  z-index: 100;

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-title {
      font-weight: $fw-bold;
      font-size: $fz-md;
      line-height: 24px;
      color: $white;
    }

    &-close {
      &-icon {
      }
    }
  }

  &__body {
    margin: $padding-llg 0;
  }

  &__descr {
    font-size: $fz-sm;
    line-height: 16px;
    color: $grey;
  }

  &__item {
    margin-bottom: $padding-llg;
  }

  &__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: $padding-llg;
    margin-top: $padding-max;
  }
}

.modal-enter-active,
.modal-leave-active {
  transition: $transition-2;
}
.modal-enter,
.modal-leave-to {
  transform: translate(-50%, -75%);
  opacity: 0;
}
